<template>
    <div class="treeBoxWrap" v-if="Array.isArray(treeData) && treeData.length > 0">
        <a-tree class="treeWrap" :tree-data="treeData" :replaceFields="replaceFields" @select="treeSelect"
            :defaultSelectedKeys="selectValue">
        </a-tree>
    </div>
</template>
<script>
export default {
    name: 'ZSTree',
    props: {
        treeData: {
            type: [Array, Object],
            default: [],
        },
        replaceFields: {
            default: {
                children: 'children',
                title: 'title',
                key: 'key',
            },
        },
        // 默认选中的数据
        selectValue: {
        },
        onCallBack: {
            default: () => { }
        },
        type: {
            default: 'key',// title
        }
    },
    mounted() {
    },
    methods: {
        treeSelect(selectedKeys, e) {
            if (this.type == 'key') {
                if (selectedKeys.length > 0) {
                    this.onCallBack(selectedKeys.join(','));
                } else if (selectedKeys.length == 0) {
                    this.onCallBack('');
                }
            } else {
                let arr = [];
                if (selectedKeys.length > 0) {
                    e.selectedNodes.filter((val) => {
                        arr.push(val.data.props[this.type]);
                    })
                }
                this.onCallBack(arr.join(','));
            }
        },
        expand(expandedKeys, e) {
        }
    }
}
</script>
<style lang="less" scoped>
.treeBoxWrap {
    // padding-left: 24px;
    height: 100%;
    width: 100%;

    .treeWrap {
        background-color: transparent !important;
        color: #ffffff;

    }

    ::v-deep {
        .ant-tree-title {
            color: #ffffff;
        }

        .ant-tree li .ant-tree-node-content-wrapper:hover {
            background-color: rgba(43, 101, 171, 0.7);
        }
    }
}
</style>